<template>
  <div class="control-group">
    <van-button round type="primary" icon="arrow-up" @click="onClick('top')" />
    <div class="flex-row">
      <van-button round type="primary" icon="arrow-left" @click="onClick('left')" />
      <van-button round type="primary" icon="arrow" @click="onClick('right')" />
    </div>
    <van-button round type="primary" icon="arrow-down" @click="onClick('bottom')" />
  </div>
</template>

<script>
import { Button } from 'vant'

export default {
  components: {
    [Button.name]: Button
  },
  methods: {
    onClick(type) {
      this.$emit('click', type)
    }
  }
}
</script>

<style lang="less">
.control-group {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .flex-row {
    width: 340px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
  .van-button {
    padding: 0;
    width: 100px;
    height: 100px;

    &__icon {
      font-size: 2em;
      font-weight: bold;
    }
  }
}
</style>
